<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>一点通后台管理</title>
		<link rel="stylesheet" href="css/bootstrap.css">
		<link rel="stylesheet" href="css/admin.css">

	</head>

	<body>

		<header class="navbar fixed-top bg-light shadow">
			<div class="container-fluid">
				<a class="navbar-brand col-md-3  px-3" href="#">
					<img src="images/logo.png" height="40px" alt="">
				</a>
				<!-- <div class="d-flex align-items-center d-none d-lg-block">
                <span>admin</span>
                <a href="#" class="text-red">
                    <svg class="bi logout ms-2"><use xlink:href="#logout"></use></svg>
                </a>
            </div> -->
				<ul class="navbar-nav flex-row d-lg-none">
					<li class="nav-item text-nowrap">
						<button class="nav-link px-3 text-secondary" type="button" data-bs-toggle="modal"
							data-bs-target="#searchModal">
							<svg class="bi">
								<use xlink:href="#search"></use>
							</svg>
						</button>
					</li>
					<li class="nav-item text-nowrap">
						<button class="nav-link px-3 text-secondary" type="button" data-bs-toggle="offcanvas"
							data-bs-target="#sidebarMenu">
							<svg class="bi">
								<use xlink:href="#list"></use>
							</svg>
						</button>
					</li>
				</ul>
			</div>
		</header>
		<!-- 模态框开始 -->
		<div class="modal" tabindex="-1" id="searchModal">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">标题</h5>
						<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
					</div>
					<div class="modal-body">

						<input class="form-control" type="text" placeholder="Search">

					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<!-- 模态框结束 -->

		<!-- 侧导航结束 -->
		<!-- 主体内容开始 -->

		<div class="container-fluid " id="app">
			<div class="row">
				<div
					class="offcanvas-lg   offcanvas-end bg-body-tertiary col-lg-3 col-xl-2 mt-lg-2 pt-lg-5  position-fixed h-100 "
					tabindex="-1" id="sidebarMenu">
					<div class="offcanvas-header text-red fw-bold">
						<h5 class="offcanvas-title">一点通</h5>
						<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#sidebarMenu"></button>
					</div>
					<div class="offcanvas-body d-flex flex-column p-3 h-100">
						<ul class="nav nav-pills flex-column mb-auto">
							<li v-for="(item,index) of menuList" :key="index" @click="onClickMenu(index)">
								<div class="nav-link" :class="index===curSelected?'active':''">
									<svg class="bi pe-none me-2" width="16" height="16">
										<use :href="item.image"></use>
									</svg> {{item.title}}
								</div>
							</li>
						</ul>
						<hr>

						<div class="d-flex align-items-center ms-3">
							<span>admin</span>
							<a href="#" class="text-red">
								<svg class="bi logout ms-2">
									<use xlink:href="#logout"></use>
								</svg>
							</a>
						</div>
					</div>
				</div>


				<div class="col-12 col-lg-9 col-xl-10 ms-auto mt-5 pt-5 px-5">
					<h2 class="my-2 fw-bold">这是首页页面</h2>

				</div>
			</div>
		</div>

		<!-- 主体内容结束 -->


		<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
			<symbol id="list" viewBox="0 0 16 16">
				<path fill-rule="evenodd"
					d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
			</symbol>
			<symbol id="search" viewBox="0 0 16 16">
				<path
					d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
			</symbol>
			<symbol id="home" viewBox="0 0 16 16">
				<path
					d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z" />
			</symbol>
			<symbol id="speedometer2" viewBox="0 0 16 16">
				<path
					d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z" />
				<path fill-rule="evenodd"
					d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z" />
			</symbol>
			<symbol id="table" viewBox="0 0 16 16">
				<path
					d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z" />
			</symbol>
			<symbol id="people-circle" viewBox="0 0 16 16">
				<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
				<path fill-rule="evenodd"
					d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z" />
			</symbol>
			<symbol id="grid" viewBox="0 0 16 16">
				<path
					d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z" />
			</symbol>
			<symbol id="logout" viewBox="0 0 1024 1024">
				<path
					d="M761.607758 636.772848c-12.815515 32.023273-35.219394 60.819394-57.623273 86.388364a256 256 0 0 1-86.388364 57.654303c-31.992242 12.784485-67.180606 22.372848-105.596121 22.372849s-73.572848-6.392242-105.596121-22.372849a406.590061 406.590061 0 0 1-86.388364-57.654303 255.720727 255.720727 0 0 1-57.592242-86.388364c-12.846545-31.961212-22.434909-67.211636-22.434909-105.596121 0-22.341818 3.227152-44.776727 6.423272-63.984485 6.361212-22.341818 12.784485-41.580606 22.372849-60.819394 9.619394-19.145697 22.403879-35.157333 35.219394-54.396121A215.350303 215.350303 0 0 1 352.007758 307.2c9.619394-6.423273 19.207758-9.588364 28.796121-6.423273 9.619394 3.258182 19.207758 6.423273 25.6 16.011637 6.423273 9.588364 9.619394 19.238788 6.423273 28.796121-3.227152 9.619394-6.423273 19.176727-16.042667 25.6-25.6 19.207758-47.972848 41.611636-60.788364 70.376727-12.784485 28.858182-22.434909 57.623273-22.434909 89.615515 0 25.6 6.423273 51.2 16.011636 76.8 9.619394 25.6 25.6 44.838788 41.611637 60.819394a187.578182 187.578182 0 0 0 60.819394 41.580606c24.203636 10.550303 50.362182 15.980606 76.768969 16.011637 25.6 0 51.2-6.392242 76.831031-16.011637 25.6-9.588364 44.807758-25.6 60.788363-41.580606a187.578182 187.578182 0 0 0 41.580606-60.819394c10.550303-24.234667 15.980606-50.362182 16.042667-76.8 0-31.961212-6.392242-60.788364-19.176727-86.388363-12.815515-25.6-32.023273-51.2-57.654303-67.211637-9.557333-6.361212-12.784485-15.949576-15.980606-25.6-3.227152-9.588364 0-19.176727 6.423273-28.765091 6.361212-9.619394 15.980606-12.784485 25.6-16.011636 9.588364-3.196121 19.145697 0 28.76509 6.361212A297.890909 297.890909 0 0 1 716.8 358.4c12.784485 16.011636 25.6 35.188364 35.188364 51.2 9.619394 19.176727 16.011636 38.415515 22.434909 57.592242 6.392242 19.207758 6.392242 41.580606 6.392242 63.984485 3.196121 38.415515-3.227152 73.634909-19.207757 105.658182v-0.062061zM473.584485 265.619394c0-9.588364 3.227152-19.176727 12.815515-28.827152 7.478303-7.974788 17.873455-12.567273 28.796121-12.784484 9.619394 0 19.176727 3.258182 25.6 12.784484 8.005818 7.509333 12.629333 17.904485 12.815515 28.858182v230.4c0 9.557333-3.227152 19.207758-12.815515 25.631031-6.423273 6.361212-15.980606 12.722424-25.6 12.722424-9.619394 0-19.207758-3.196121-28.796121-12.784485-6.392242-6.392242-12.815515-16.011636-12.815515-25.6V265.588364zM512 0C230.4 0 0 230.4 0 512S230.4 1024 512 1024 1024 793.6 1024 512 793.6 0 512 0z"
					p-id="4413"></path>
			</symbol>
		</svg>
		<script src="js/bootstrap.js"></script>
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="js/vue.js"></script>
		<script>
			new Vue({
				//DOM元素
				el: "#app",
				//数据
				data: {
					dataLoaded: false, // 标记数据是否已加载
					items: [], // 存储数据的数组
					message: '商品管理',
					keyword: '',
					itemsFilter: [],
					menuList: [
						{
							title: "首页",
							image: "#home",
							goto:"admin.html",
						},
						{
							title: "订单管理",
							image: "#table",
							goto:"admin-order.html",
						},
						{
							title: "新闻管理",
							image: "#speedometer2",
						},
						{
							title: "商品管理",
							image: "#grid",
							goto:"admin-goods.html",
						},
						{
							title: "客户管理",
							image: "#people-circle",
						},
					],
					curSelected: 0,
				},
				//方法
				methods: {
					loadData() {
						this.items = [{
								"id": "1",
								"productName": "iphone X",
								"image": "images/phone/iphone1.jpg",
								"productType": "手机",
								"productBrand": "苹果",
								"price": 2000,
								"count": 8,
								"time": "2018-09-01"
							},
							{
								"id": "2",
								"productName": "iPhone 8 plus",
								"image": "images/phone/iphone2.jpg",
								"productType": "手机",
								"productBrand": "苹果",
								"price": 1500,
								"count": 28,
								"time": "2018-01-01"
							},
							{
								"id": "3",
								"productName": "iPhone 7",
								"image": "images/phone/iphone3.jpg",
								"productType": "手机",
								"productBrand": "苹果",
								"price": 1000,
								"count": 24,
								"time": "2017-02-01"
							},
							{
								"id": "4",
								"productName": "XiaoMi MAX3",
								"image": "images/phone/iphone4.jpg",
								"productType": "手机",
								"productBrand": "小米",
								"price": 3000,
								"count": 9,
								"time": "2018-06-01"
							},
							{
								"id": "5",
								"productName": "honor-8X",
								"image": "images/phone/iphone5.jpg",
								"productType": "手机",
								"productBrand": "荣耀",
								"price": 2000,
								"count": 7,
								"time": "2017-10-01"
							},
							{
								"id": "6",
								"productName": "honor-10",
								"image": "images/phone/iphone6.jpg",
								"productType": "手机",
								"productBrand": "荣耀",
								"price": 3100,
								"count": 82,
								"time": "2020-09-22"
							},
							{
								"id": "7",
								"productName": "Galaxy Note8",
								"image": "images/phone/iphone7.jpg",
								"productType": "手机",
								"productBrand": "三星",
								"price": 3200,
								"count": 28,
								"time": "2020-09-22"
							},
							{
								"id": "8",
								"productName": "nova 3i",
								"image": "images/phone/iphone8.png",
								"productType": "手机",
								"productBrand": "华为",
								"price": 2200,
								"count": 18,
								"time": "2019-08-08"
							}
						]
						this.dataLoaded = true;
					},
					onClickMenu(i) {
						this.curSelected = i;
						//导航到对应页面
						//0  home   1 order  3  goods
						// this.menuList[i].goto
						console.log(this.menuList[i].goto)
						window.location = this.menuList[i].goto
					}
				},
				//实例的生命周期
				mounted() {
					console.log('当前状态：mounted');
					setTimeout(() => {
						this.loadData();
						this.itemsFilter = this.items;
					}, 2000)
				},
				//计算属性
				computed: {
					totalMoney() {
						//怎么计算总金额
						// items是数组 数组元素是对象 对象有属性  单价 数量 
						// 每个数据元素的金额进行累加
						// item.price * item.count
						// 对数据的每个元素进行遍历
						// let sum = 0;
						// for (let i = 0; i < this.items.length; i++) {
						//   sum  = sum + this.items[i].price * this.items[i].count;
						// }
						// return sum;
						let sum = 0;
						this.items.forEach(item => {
							sum = sum + item.price * item.count;
						})
						return sum;
					},

					totalCount() {
						//遍历作用域：  局部 全局
						let sum = 0;
						for (let i = 0; i < this.items.length; i++) {
							sum = sum + this.items[i].count;
						}
						return sum;
					},

					// itemsFilter(){
					// 	return this.items.filter(item=>{
					// 		return item.productBrand.includes(this.keyword)
					// 	})
					// },				
				},

				//侦听器
				watch: {
					keyword(newValue) {
						console.log("新的值=" + newValue)
						//根据输入的品牌 显示对应品牌商品列表							
						this.itemsFilter = this.items.filter(item => {
							return item.productBrand.includes(this.keyword)
						})
					}
				},
			});
		</script>
	</body>
</html>